import styled from 'styled-components'
export const ArtistSongWrapper = styled.div`
 table {
      width: 100%;
      border: 1px solid #d9d9d9;
      thead {
        th {
          height: 34px;
          line-height: 34px;
          background-image: url(${require("@/assets/img/sprite_table.png")});
          color: #666;
          /* border: 1px solid #ddd; */
          border-width: 0 0 1px 1px;
          padding-left: 10px;
        }
        .ranking {
          width: 100px;
          border-left: none;
          
        }
        .title{
          width:350px;
        }
        .duration {
          width: 91px;
        }
      
      }
      tbody {
        td {
          padding: 6px 10px;
        }

        tr:nth-child(2n) {
          background-color: #fff;
        }

        tr:nth-child(2n+1) {
          background-color: #f7f7f7;
        }

        .rank-num {
          display: flex;
          .num {
            width: 25px;
            height: 18px;
            text-align: center;
            color: #999;
          }

          .play {
            width: 17px;
            height: 17px;
            background-position: 0 -103px;
            cursor:pointer;
          }
        }

        .song-name {
          display: flex;
          align-items: center;
          img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
            cursor:pointer;
          }
          .name {
            margin-left: 10px;
            cursor:pointer;
          }
        }
        .dt{
          .operate {
            margin-left:-49px;
            display: flex;
            align-items: center;
            display: none;
            .btn {
              width: 17px;
              height: 17px;
              line-height:17px;
              margin-left: 8px;
              cursor: pointer;
            }

            .play {
              background-position: -267px -268px;
            }

            .addto {
              position: relative;
              top: 2px;
              background-position: 0 -700px;
            }

            .favor {
              background-position: -297px -268px;
            }
          }
          &:hover {
            .operate {
              display: inline-block;
            }
            .dt_content{
              display: none;
            }
          }
        }
      }
    }
`